<template>
	<view>
		<view class="CM-top"></view>

		<customTabbar />
		<view class="addressSearch" @click="cityPage">
			<uni-search-bar v-model="position" class="nav-header-mt" clearButton="none"
				cancelButton="none" radius="100">
				<template v-slot:searchIcon>
					<image src="/static/index/定位.png" mode="widthFix" style="width: 36rpx;"></image>
				</template>
			</uni-search-bar>
		</view>
		<view class="refresh">
			<image src="/static/index/刷新.png" mode=""></image>
			<text>刷新</text>
		</view>


		<view class="indexContainer">
			<!-- 标签部分 -->
			<view class="topTap">
				<view class="tap" @click="toMaintenance">
					<view class="back1">
						<image class="img1" src="/static/index/车辆维修1-01@3x.png" mode=""></image>
					</view>

					<text>车辆维修</text>
				</view>
				<view class="tap" @click="toCarMaintenance">
					<view class="back2">
						<image class="img2" src="/static/index/保养@3x.png" mode=""></image>
					</view>
					<text>汽车保养</text>
				</view>
				<view class="tap" @click="toWashPro">
					<view class="back3">
						<image class="img3" src="/static/index/洗车@3x.png" mode=""></image>
					</view>
					<text>专业洗车</text>
				</view>
				<view class="tap" @click="toaddOil">
					<view class="back4">
						<image class="img4" src="/static/index/加油枪 (1)@3x.png" mode=""></image>
					</view>
					<text>就近加油</text>
				</view>

			</view>

			<!-- 附近加油站 -->

			<view class="addOil">
				<view class="topOil">
					<view class="leftText">
						<view class="">
							附近加油站
						</view>
						<view class="">
							根据您你位置推荐最近的加油站
						</view>
					</view>
					<view class="rightPart">
						更多 >
					</view>
				</view>

				<view class="oilMap">

				</view>
			</view>

			<!-- 优惠团购 -->
			<view class="teamShopping">
				<view class="topFree">
					<view class="leftText">
						<view class="">
							优惠团购
						</view>
						<view class="">
							钜惠来袭，为您的爱车续航
						</view>
					</view>
					<view class="rightPart" @click="toGroupList">
						更多 >
					</view>
				</view>
				<view class="freeInfo">
					<view class="model">
						<image src="/static/index/图层 1.png" mode=""></image>
						<text>汽车惠民活动走进</text>
					</view>
					<view class="model">
						<image src="/static/index/图层 1.png" mode=""></image>
						<text>汽车惠民活动走进</text>
					</view>
					<view class="model">
						<image src="/static/index/图层 1.png" mode=""></image>
						<text>汽车惠民活动走进</text>
					</view>
					<view class="model">
						<image src="/static/index/图层 1.png" mode=""></image>
						<text>汽车惠民活动走进</text>
					</view>

				</view>
			</view>

		</view>



	</view>
</template>

<script>
	import customTabbar from "@/components/tabbar/tabbar.vue"
	export default {
		components: {
			customTabbar
		},
		data() {
			return {
				position: "未定位"

			}
		},
		onShow() {
			this.getStoredPosition();
		},
		methods: {
			//获取位置信息
			getStoredPosition() {
				// 从本地存储中获取位置信息
				const storedPosition = wx.getStorageSync('currentPosition');
				if (storedPosition) {
					this.position = storedPosition; // 更新位置
				}
			},
			

			// 前往地区选择页面
			cityPage() {
				uni.navigateTo({
					url: "/pages/cityPage/cityPage"
				})
			},
			
			//前往车辆维修
			toMaintenance(){
				uni.navigateTo({
					url:"/pages/maintenance/maintenance"
				})
			},
			
			//前往车辆保养
			toCarMaintenance(){
				uni.navigateTo({
					url:"/pages/CarMaintenance/CarMaintenance"
				})
			},
			
			//前往洗车
			toWashPro(){
				uni.navigateTo({
					url:"/pages/washPro/washPro"
				})
			},
			
			//前往加油
			toaddOil(){
				uni.navigateTo({
					url:"/pages/RefuelNearby/homepage/homepage"
				})
			},
			
			toGroupList(){
				uni.navigateTo({
					url:"/pages/CarMaintenance/WActivityList/WActivityList"
				})
			}

		}
	}
</script>

<style>
	.CM-top {
		width: 100%;
		height: 360rpx;
		background-color: #1E90FF;
		position: fixed;
	}



	page {
		background-color: #F5F5F5;
	}

	.indexContainer {
		width: 95%;
		border-radius: 35rpx;
		height: auto;
		background-color: #F5F5F5;
		position: absolute;
		left: 0;
		right: 0;
		margin: 30rpx auto 0;
		padding-bottom: var(--window-bottom);

	}

	.addressSearch {
		padding-top: 150rpx;
		width: 85%;
		height: red;
		/* margin: 0 auto; */

	}

	.refresh {
		position: absolute;
		width: 15%;
		height: 110rpx;
		right: 20rpx;
		top: 150rpx;
		display: flex;
		/* 使用 Flexbox */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: center;
		/* 水平居中对齐 */
		/* background-color: greenyellow; */
	}

	.refresh image {
		width: 50rpx;
		height: 50rpx;
		/* 	background-color: #2575fc; */
		margin-left: 5rpx;
		/* 添加左边距以分隔图标和文字 */
	}

	.refresh text {
		font-size: 11px;
		color: white;

	}

	.indexContainer .topTap {
		width: 95%;
		border-radius: 35rpx;
		background-color: white;
		height: 200rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-around;
	}

	.indexContainer .topTap .tap {
		width: 20%;
		height: 130rpx;
		/* 	background-color: aqua; */
		margin: 35rpx auto;
		text-align: center;
	}

	.indexContainer .topTap .tap .back1 {
		width: 90rpx;
		height: 90rpx;
		margin: 0 auto;
		border-radius: 15rpx;
		background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
	}

	.indexContainer .topTap .tap .back2 {
		width: 90rpx;
		height: 90rpx;
		margin: 0 auto;
		border-radius: 15rpx;
		background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);
	}

	.indexContainer .topTap .tap .back3 {
		width: 90rpx;
		height: 90rpx;
		margin: 0 auto;
		border-radius: 15rpx;
		background-image: linear-gradient(to top, #9be15d 0%, #00e3ae 100%);
	}

	.indexContainer .topTap .tap .back4 {
		width: 90rpx;
		height: 90rpx;
		margin: 0 auto;
		border-radius: 15rpx;
		background-image: linear-gradient(to top, #209cff 0%, #68e0cf 100%);
	}

	.indexContainer .topTap .tap .back1 .img1 {
		width: 70rpx;
		height: 40rpx;
		display: block;
		margin: 0 auto;
		padding: 25rpx 10rpx;

	}

	.indexContainer .topTap .tap .back2 .img2 {
		width: 50rpx;
		height: 60rpx;
		display: block;
		margin: 0 auto;
		padding: 15rpx 20rpx;

	}

	.indexContainer .topTap .tap .back3 .img3 {
		width: 50rpx;
		height: 60rpx;
		display: block;
		margin: 0 auto;
		padding: 15rpx 20rpx;

	}

	.indexContainer .topTap .tap .back4 .img4 {
		width: 60rpx;
		height: 60rpx;
		display: block;
		margin: 0 auto;
		padding: 15rpx 15rpx;

	}


	.indexContainer .topTap .tap text {
		font-size: 11px;
		color: #696969;

	}

	.indexContainer .addOil {
		width: 95%;
		border-radius: 35rpx;
		background-color: white;
		height: auto;
		margin: 30rpx auto;
		padding: 20rpx 0;

	}

	.indexContainer .teamShopping {
		width: 95%;
		height: auto;
		border-radius: 35rpx;
		background-color: white;
		margin: 30rpx auto;
		padding: 20rpx 0;
	}

	/* 附近加油站样式 */

	.addOil .topOil {
		width: 95%;
		height: 100rpx;
		/* background-color: #00e3ae; */
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}

	.addOil .topOil .leftText view:nth-child(2) {
		color: #A9A9A9;
		font-size: 10px;
	}

	.addOil .topOil .rightPart {
		color: #696969;
		height: 100rpx;
		font-size: 11px;
		line-height: 100rpx;
	}

	/* 地图 */
	.addOil .oilMap {
		width: 95%;
		height: 350rpx;
		background-color: #6a11cb;
		margin: 0 auto;

	}



	/*优惠团购*/

	.teamShopping .topFree {
		width: 95%;
		height: 100rpx;
		/* 	background-color: #00e3ae; */
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}

	.teamShopping .topFree .leftText view:nth-child(2) {
		color: #A9A9A9;
		font-size: 10px;
	}

	.teamShopping .topFree .rightPart {
		color: #696969;
		height: 100rpx;
		font-size: 11px;
		line-height: 100rpx;
	}

	/* 优惠团购部分 */
	.teamShopping .freeInfo {
		width: 95%;
		display: flex;
		/* 使用 Flexbox */
		flex-wrap: wrap;
		/* 允许换行 */
		justify-content: space-between;
		/* 使内容均匀分布 */
		margin: 0 auto;
	}

	.teamShopping .freeInfo .model {
		width: 48%;
		/* 设置宽度为48% */
		height: 220rpx;
		/* 设置固定高度 */
		/* background-color: greenyellow; */
		margin-bottom: 20rpx;
		/* 添加底部间距 */
		display: flex;
		/* 文字居中 */
		flex-direction: column;
		align-items: flex-start;
	}

	.teamShopping .freeInfo .model image {
		width: 100%;
		height: 180rpx;
		background-color: #A9A9A9;
		border-radius: 10rpx;
	}

	.teamShopping .freeInfo .model>text {
		padding-top: 5rpx;
		font-size: 11px;
		/* 确保文字在新行显示 */
		text-align: center;
		/* 文字居中 */
	}
</style>